* {
	margin: 0;
	padding: 0;

	body {
		.container {
			// 如果全屏。这里需要修改
			width: 600px;
			height: 400px;
			border: 1px solid black;
			position: absolute;
			margin: auto;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			// overflow: hidden;

			ul {
				position: absolute;
				left: 0;
				// width: 500%;
				height: 100%;

				li {
					list-style: none;
					// 如果全屏。这里需要修改
					width: 600px;
					height: 400px;
					float: left;

					img {
						width: 100%;
						height: 100%;
					}
				}
			}

			ol {
				position: absolute;
				bottom: 0;
				left: 50%;
				transform: translateX(-50%);

				li {
					color: red;
					margin-left: 10px;
					list-style: none;
					display: inline-block;
					cursor: pointer;
				}
				.active {
					color: #fff;
					font-size: 20px;
				}
			}

			.left,
			.right {
				position: absolute;
				left: 0;
				top: 50%;
				background: #fff;
				height: 20px;
				width: 20px;
				border-radius: 50%;
				color: #333;
				text-align: center;
				transform: translateY(-50%);
				cursor: pointer;
			}

			.right {
				left: auto;
				right: 0;
			}

			.but-none {
				display: none;
			}

			& .but-hover {
				display: none;
			}

			&:hover .but-hover {
				display: block;
			}
		}
	}
}